<!DOCTYPE html>
<html class="x-admin-sm">
{include file='public/header'}
<style>
    .layui-form-label {
        width: 100px;
    }

    .layui-input-block {
        margin-left: 130px;
        width: 100%;
    }

    .layui-row {
        margin-bottom: 10px;
    }

    .layui-input {
        border: none;
        padding-left: 0;
    }
    .layui-table-view{
        margin: 0;
    }
</style>

<body>
    <div class="x-body">
        <form class="layui-form" lay-filter="formAjax">
            <div class="layui-row">
                <div class="layui-col-md4">
                    <div class="layui-inline">
                        <label class="layui-form-label">
                            名称：
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="user_name" disabled class="layui-input" value="" />
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-inline">
                        <label class="layui-form-label">
                            K币余额：
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="money" disabled class="layui-input" value="" />
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-inline">
                        <label class="layui-form-label">
                            观看短剧数量：
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="watch_number" disabled class="layui-input" value="" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md4">
                    <div class="layui-inline">
                        <label class="layui-form-label">
                            公众号用户ID：
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="official_account_open_id" disabled class="layui-input" value="" />
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-inline">
                        <label class="layui-form-label">
                            所属公众号：
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="official_account_name" disabled class="layui-input" value="" />
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-inline">
                        <label class="layui-form-label">
                            充值单数：
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="recharge_number" disabled class="layui-input" value="" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md4">
                    <div class="layui-inline">
                        <label class="layui-form-label">
                            小程序用户ID：
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="open_id" disabled class="layui-input" value="" />
                        </div>
                    </div>
                </div>

                <div class="layui-col-md4">
                    <div class="layui-inline">
                        <label class="layui-form-label">
                            公众号：
                        </label>
                        <div class="layui-input-block">
                            <input type="text" name="official_account_id" disabled class="layui-input" value="" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="layui-tab" lay-filter="record">
            <ul class="layui-tab-title">
                <li class="layui-this">消费记录</li>
                <li>观看记录</li>
                <li>充值记录</li>
            </ul>
            <table id="userDetail" lay-filter="userDetail"></table>
        </div>
    </div>
    <script>
        let params = {
            detailUrl: '/admin/user/detail',
        }
        form_ajax(params)
        let id = GetQueryString('id')

        Ajax('/admin/money/getRechargeType', {type:0}).then(result => {
            let tabMessage = [
                {
                    cols: [[
                        { field: 'id', title: '短剧ID', align:'center' },
                        { field: 'video_name', title: '短剧名称', align:'center' },
                        {
                            title: '剧情名称', templet: function (d) {
                                return `第${d.video_detail_name}集`
                            }, align:'center'
                        },
                        { field: 'money', title: '消费k币', align:'center' }
                        , {
                            field: 'money', title: '时间', templet: function (d) {
                                return dayjsFormat(d.created_at)
                            }, align:'center'
                        }
                    ]],
                    url: `/admin/user/consumeRecord?id=${id}`
                },
                {
                    cols: [[
                        { field: 'id', title: '短剧ID', align:'center' },
                        { field: 'video_name', title: '短剧名称', align:'center' },
                        {
                            title: '剧情名称', templet: function (d) {
                                return `第${d.video_detail_name}集`
                            }, align:'center'
                        }
                        , {
                            field: 'created_at', title: '观看时间', templet: function (d) {
                                return dayjsFormat(d.created_at)
                            }, align:'center'
                        }
                    ]],
                    url: `/admin/user/watchRecord?id=${id}`
                },
                {
                    cols: [[
                        { field: 'name', title: '充值名称', align:'center', width:130 },

                        { field: 'total_fee', title: '充值金额(元)', align:'center', width:110 },
                        { field: 'status', title: '支付状态', templet: function (d) {
                                return d.status == 1 ? '已支付' : '待支付'
                            }, align:'center', width:100
                        },
                        {
                            field: 'created_at', title: '充值时间', templet: function (d) {
                                return dayjsFormat(d.created_at)
                            }, align:'center', width:160
                        },
                        { field: 'pay_type', title: '支付渠道', templet: function (d) {
                                return d.pay_type == 1 ? '微信支付' : d.pay_type == 2 ? '支付宝支付' : ''
                            }, align:'center', width:108
                        },
                        { field: 'order_no', title: '订单号', align:'center', width:200 },
                        { field: 'wechat_order_no', title: '微信/支付宝订单号', align:'center', width:280 },
                        { field: 'platform_order_no', title: '平台订单号（第三方/抖音/快手）', align:'center', width:260 }
                            , { field: 'type', title: '充值类型',width:100, templet: function (d) {
                                for (let index = 0; index < result.data.length; index++) {
                                    const element = result.data[index];
                                    if(element.id == d.type){
                                        return element.name
                                    }
                                }
                            }, align:'center'
                        }
                        , { field: 'pay_merchant', title: '支付商户',width:120, templet: function (d) {
                            return getPayMerchant(d.pay_merchant)
                            }, align:'center'
                        }
                    ]],
                    url: `/admin/user/rechargeRecord?id=${id}`
                }
            ]

            function TabInit(index) {
                let userDetail = {
                    elem: '#userDetail'
                    , url: tabMessage[index].url //数据接口
                    , id: 'userDetail'
                    , page: true
                    , cols: tabMessage[index].cols
                }
                tableList(userDetail)
            }
            TabInit(0)

            layui.use('element', function () {
                var element = layui.element;
                element.on('tab(record)', function (data) {
                    TabInit(data.index)
                })
            })
        })
        
        
        // 获取商户号
        let payMerchant = []
        Ajax('/admin/record/payMerchantSelect',{},'get').then(data=>{
            payMerchant = data.data;
        })
        function getPayMerchant(pay_merchant){
            for (let index = 0; index < payMerchant.length; index++) {
                const element = payMerchant[index];
                if(element.pay_merchant == pay_merchant){
                    return element.pay_merchant_name
                }
            }
            return '未知'
        }
    </script>
</body>

</html>